<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>iframe 和父页面之间相同通信</title>
    <style>
        /* * {
            margin: 0;
            padding: 0;
            font-family: 'microsoft Yahei';
        } */

        p {
            margin: 10px 0;
        }

        body {
            background-color: lightblue;
        }

        h1 {
            text-align: center;
            font-weight: normal;
        }

        .container {
            position: relative;
            margin: 0 auto;
            padding: 20px;
            width: 400px;
        }

        button {
            height: 36px;
            padding: 7px 20px;
            border-radius: 3px;
            color: #fff;
            background-color: #02bd85;
            border: 1px solid #02a473;
            cursor: pointer;
        }

        button:hover {
            background-color: #018b61;
        }
    </style>
</head>

<body>

    <h1>iframe 和父页面之间相同通信</h1>
    <div class="container">
        <p>在 iframe 中改变父页面中的 h1 标题</p>
        <p style="text-align: left;">jquery：</p>
        <p>
            <button id="jq-change-btn">颜色变为 蓝色</button>
            <button id="jq-reset-btn">重置</button>
        </p>
        <p style="text-align: left;">js：</p>
        <p>
            <button id="js-change-btn">颜色变为 红色</button>
            <button id="js-reset-btn">重置</button>
        </p>
        <p style="text-align: left;">调用 iframe 的一个全局方法：</p>
        <p>
            <button id="run">run</button>
        </p>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
    
        window.onload = function () {
            // 调用 父页面的一个方法
            $('#run').on('click', function () {
                parent.parentFn();
            })
            window.name = 'iframe';
            window.iframeFn = function () {
                var text = '我来自 iframe ，由 父页面 调用';
                console.log(text);
            }

            // jquery 版
            var $h1 = $("h1", window.parent.document);

            $('#jq-change-btn').on('click', function () {
                $h1.css({ color: 'blue' });
            });

            $('#jq-reset-btn').on('click', function () {
                $h1.css({ color: '' });
            });

            // js 版
            var changeBtn = document.querySelector('#js-change-btn');
            var resetBtn = document.querySelector('#js-reset-btn');
            changeBtn.addEventListener('click', function () {
                var _h1 = window.parent.document.querySelector('h1');
                _h1.style.color = 'red';
            });
            resetBtn.addEventListener('click', function () {
                var _h1 = window.parent.document.querySelector('h1');
                _h1.style.color = '';
            });
        }
    </script>
</body>

</html>